<template>
    <div
            v-infinite-scroll="handleInfiniteOnLoad"
            class="demo-infinite-container"
            :infinite-scroll-disabled="busy"
            :infinite-scroll-distance="10">
        <a-list-item>
            <a-input-search placeholder="请输入房间号/姓名/手机号" enter-button @search="onSearch" />
        </a-list-item>
        <a-list :data-source="data" style="padding: 0px 0px 0px 0px">

            <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta :description="item.ownerName + ' ' +  item.ownerCellphone"
                                  @click="handleClick(item.id)"
                >
                    <a slot="title">{{ item.properyName }}</a>
                    <a-avatar
                            slot="avatar"
                            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                    />
                </a-list-item-meta>
                <div>{{item.no}}</div>
            </a-list-item>
            <div v-if="loading && !busy" class="demo-loading-container">
                <a-spin />
            </div>
        </a-list>
    </div>
</template>

<script>
    import {doPost} from "@/utils/requestUtil";
    import infiniteScroll from 'vue-infinite-scroll';
    // const data = [
    //     {
    //         id: 1,
    //         properyName: 'tt',
    //         ownerName: 'dd',
    //         ownerCellphone: '13555'
    //     },
    //     {
    //         id: 2,
    //         properyName: 'tt',
    //         ownerName: 'dd',
    //         ownerCellphone: '13555'
    //     },
    //     {
    //         id: 3,
    //         properyName: 'tt',
    //         ownerName: 'dd',
    //         ownerCellphone: '13555'
    //     },
    //     {
    //         id: 4,
    //         properyName: 'tt',
    //         ownerName: 'dd',
    //         ownerCellphone: '13555'
    //     },
    // ];
    export default {
        inject: ['setTitle', 'setHidden'],
        directives: { infiniteScroll },
        name: 'propertylist',
        data() {
            return {
                data: [],
                loading: false,
                busy: false,
                params: {
                    areaId: this.$route.params.id,
                    parma: '',
                }
            }
        },
        beforeMount() {
            this.setTitle(this.$route.query.name);
            this.setHidden(false);
            // this.data = data;
            if (this.$cookies.isKey('userid')) {
                doPost("/prjproperty/api/property/query", this.params).then((res) => {

                    if (res.success) {
                        if (res.data.length > 0) {
                            this.data = res.data;
                        } else {
                            this.$message.error("查不到列表信息。")
                        }
                    }
                }).catch((err) => {
                    console.info(err);
                })
            } else {
                this.$message.error("请在企业微信中打开。");
            }
        },
        methods: {
            onSearch(value) {
                this.params.parma = value;
                doPost("/prjproperty/api/property/query", this.params).then((res) => {
                    this.data = res.data;
                }).catch((err) => {
                    console.info(err);
                });
            },
            handleInfiniteOnLoad() {
                const data = this.data;
                this.loading = true;
                if (data.length > 14) {
                    // this.$message.warning('Infinite List loaded all');
                    this.busy = true;
                    this.loading = false;
                    return;
                }
                this.loading = false;
                // if (this.$cookies.isKey('userid')) {
                //     doPost("/prjproperty/api/property/query", this.params).then((res) => {
                //         this.data = data.concat(res.data);
                //         this.loading = false;
                //     }).catch((err) => {
                //         console.info(err);
                //     });
                // }
            },
            handleClick(e) {
                this.$router.push("/propertylist/" + this.params.areaId + '/' + e + '?name=' + this.$route.query.name);
            }
        }
    }

</script>
<style>
    .demo-infinite-container {
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        overflow: auto;
        padding: 8px 24px;
        height: 640px;
    }
    .demo-loading-container {
        position: absolute;
        bottom: 40px;
        width: 100%;
        text-align: center;
    }
</style>
